<template>
  <view class="medicine_detail_root">
    <view class="header_box">
      <view
        class="title_box"
        :class="{
          yellow: info.state == 0,
          green: info.state == 1,
          red: info.state == 2,
        }"
      >
        <view class="lable_title">
          {{ info.name }}
        </view>
        <view
          class="common_tag"
          :class="{
          tag_yellow: info.state == 0,
          tag_green: info.state == 1,
          tag_red: info.state == 2
        }"
        >
          {{ info.state | stateStr }}
        </view>
      </view>
      <view class="common_message_box">
        <view class="msg_item">
          <view class="left">
            品 牌：
          </view>
          <view class="right">
            {{ info.brand }}
          </view>
        </view>
        <view class="msg_item">
          <view class="left">
            规 格：
          </view>
          <view class="right">
            {{ info.model }}
          </view>
        </view>
        <view class="msg_item">
          <view class="left">
            批准文号：
          </view>
          <view class="right">
            {{ info.approval_number }}
          </view>
        </view>
      </view>
    </view>
    <view class="common_tab">
      <view
        class="tab_item"
        :class="{ is_current: current == index }"
        v-for="(item, index) in contentList"
        @click="current = index"
        :key="index"
      >
        {{ item }}
      </view>
    </view>

    <view
      class="content_box common_message_box"
      v-show="current == 0"
    >
      <view
        class="msg_item"
        v-for="(item, index) in msgList"
        :key="index"
      >
        <view class="left">
          {{ item.name }}：
        </view>
        <view class="right all">
          {{ info[item.key] | emptyStr }}
        </view>
      </view>
    </view>

    <view
      class="common_float_btn edit"
      @click="toEdit"
    />
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      visible: { show: false },
      info: undefined,
      current: 0,
      contentList: [
        "详细信息", "关联计划"
      ],
      msgList: [
        { name: "适应症", key: "symptoms_treatment" },
        { name: "用法用量", key: "usage_dosage" },
        { name: "成 份", key: "component" },
        { name: "不良反应", key: "adverse_reactions" },
        { name: "禁 忌", key: "taboo" },
        { name: "注意事项", key: "attention" },
        { name: "相互作用", key: "interaction" },
        { name: "贮 藏", key: "storage" },
      ],
    };
  },
  methods: {
    toEdit() {
      this.setIntent(this.info);
      uni.navigateTo({ url: "/pages/medicine/edit" });
    },
  },
  mounted() { },
  filters: {
    stateStr(state) {
      switch (state) {
        case 0:
          return "待审核";
        case 1:
          return "已审核";
        case 2:
          return "未通过";
      }
    },
  },
  created() {
    this.info = this.getIntent();
    console.log('this.info：', this.info);
  },
};
</script>

<style
  lang="scss"
  scoped
>
.medicine_detail_root {
  background: #F8FAFE;
  height: 100vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;

  .header_box {
    background: #FFFFFF;
    margin: 40rpx 40rpx 0;

    box-shadow: 0rpx 8rpx 32rpx 0rpx rgba(61, 79, 124, 0.08);
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    border: 1rpx solid #D5D9E5;
    flex-shrink: 0;

    .title_box {
      display: flex;
      align-items: center;
      padding: 24rpx 40rpx;
      justify-content: space-between;
      border-radius: 24rpx 24rpx 0rpx 0rpx;

      &.yellow {
        background: linear-gradient(127deg, rgba(255, 179, 64, 0.1) 0%, rgba(255, 179, 64, 0.02) 100%);
      }

      &.green {
        background: linear-gradient(127deg, rgba(0, 199, 119, 0.1) 0%, rgba(0, 199, 119, 0.02) 100%);
      }

      &.red {
        background: linear-gradient(127deg, rgba(244, 42, 66, 0.1) 0%, rgba(244, 42, 66, 0.02) 100%);
      }

      .lable_title {
        font-weight: 600;
        font-size: 32rpx;
        color: #0D1F4F;
        line-height: 48rpx;
        text-align: left;
      }
    }
  }

  .common_tab {
    flex-shrink: 0;
  }

  .content_box {
    flex: 1;
    margin: 0 40rpx 24rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 8rpx 32rpx 0rpx rgba(61, 79, 124, 0.08);
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    overflow: auto;
  }
}
</style>